<template>
    <h2>toRefs</h2>
    <!--    <h2>{{ state.name }}</h2>
        <h2>{{ state.age }}</h2>-->

    <h3>name: {{name}}</h3>
    <h3>age:{{age}}</h3>
</template>

<script lang="ts">


import {defineComponent, reactive, toRefs} from "vue";

function userFeature() {
    let state = reactive({
        name: "风里来",
        age: 47
    })
    return {
        ...toRefs(state)
    }
}

export default defineComponent({
    name: "ToRefs",
    setup() {
        let state = reactive({
            name: "风里来",
            age: 47
        })
        // toRefs 可以把reactive包裹的数据变成普通的对象包裹的ref
        // let state2 = toRefs(state)
        let {name, age} = toRefs(state)
        // console.log(state2)

        // 定时器更新数据
        setInterval(() => {
            state.name += "=="
        }, 2000)

        return {
            // ...state // 不是响应式数据了 {name:"风里来", age:47}
            // ...state2
            name,age
        }
    }
})
/*@Options({
  components: {
    HelloWorld
  }
})*/
/*export default class App extends Vue {

@setup()*/
</script>

<style>

</style>